<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Slider - Multiple sliders</title>
<link type="text/css" href="../../themes/base/ui.all.css"
	rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.3.2.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../ui/ui.slider.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
#demo-frame>div.demo {
	padding: 10px !important;
}

#eq span {
	height: 120px;
	float: left;
	margin: 15px
}
</style>
<script type="text/javascript">
	$(function() {
		// change defaults for range, animate and orientation
		$.extend($.ui.slider.defaults, {
			range: "min",
			animate: true,
			orientation: "vertical"
		});
		// setup master volume
		$("#master").slider({
			value: 60,
			orientation: "horizontal"
		});
		// setup graphic EQ
		$("#eq > span").each(function() {
			// read initial values from markup and remove that
			var value = parseInt($(this).text());
			$(this).empty();
			$(this).slider({
				value: value
			})
		});
	});
	</script>
</head>
<body class="ui-widget-content" style="border: 0;">

<div class="demo">

<p class="ui-state-default ui-corner-all ui-helper-clearfix"
	style="padding: 4px;"><span class="ui-icon ui-icon-volume-on"
	style="float: left; margin: -2px 5px 0 0;"></span> Master volume</p>

<div id="master" style="width: 260px; margin: 15px;"></div>

<p class="ui-state-default ui-corner-all"
	style="padding: 4px; margin-top: 4em;"><span
	class="ui-icon ui-icon-signal"
	style="float: left; margin: -2px 5px 0 0;"></span> Graphic EQ</p>

<div id="eq"><span>88</span> <span>77</span> <span>55</span> <span>33</span>
<span>40</span> <span>45</span> <span>70</span></div>

</div>
<!-- End demo -->

<div class="demo-description" style="clear: left;">

<p>Combine horizontal and vertical sliders, each with their own
options, to create the UI for a music player.</p>

</div>
<!-- End demo-description -->

</body>
</html>
